<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>忘记密码</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/l-style.css" rel="stylesheet">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <script type="text/javascript" src="js/pop_status.js"></script>
</head>
<body>
<div class="container">
    <div class="login-wrapper">
        <div class="auth-box">
            <div class="login-layout">
                <div class="back-title">找回密码</div>

                <div class="auth-mes">
                    <div class="auth-input">
                        <span class="auth-i-left">手机号码</span>
                        <input type="text" class="back-input" name="phone" placeholder="手机号">
                    </div>

                    <div class="salt-box">
                        <div class="auth-input fl" style="margin-top: 20px;">
                            <span class="auth-i-left">短信验证码</span>
                            <input type="text" class="salt-input" name="salt" placeholder="请输入短信验证码">
                        </div>
                        <div class="fr">
                            <button class="salt-btn" id="smal-mess">获取验证码</button>
                        </div>
                    </div>

                    <div class="auth-input" style="margin-top: 20px;">
                        <span class="auth-i-left">新密码</span>
                        <input type="password" class="back-input" name="new_password" placeholder="请设置新的密码">
                    </div>

                    <div class="auth-input" style="margin-top: 20px;">
                        <span class="auth-i-left">确认密码</span>
                        <input type="password" class="back-input" name="repeat_password" placeholder="请再次输入新的密码">
                    </div>
                </div>

                <a class="forget-text" href="login.html">返回登录</a>

                <button class="auth-btn">保存修改</button>
            </div>
        </div>

        <div class="l-copyright">Copyright @ 2001-2017 All right Reserved</div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $('.w-icon').on('click', function() {
            $(this).toggleClass('y-icon');
        });

        // 获取验证码
        //  短信验证码发送时间
        var countdown = 59;
        var this_input = document.getElementById("smal-mess");
        function settime() {
            if (countdown == '-1') {
                this_input.removeAttribute("disabled");
                this_input.innerHTML = "短信验证码";
                countdown = 59;
            } else {
                this_input.setAttribute("disabled", true);
                this_input.innerHTML = "重新发送(" + countdown + ")";
                countdown --;
                setTimeout(function() {
                    settime()
                },1000)
            }
        }

        //  点击获取验证码
        $(".salt-btn").on('click',function(){
            var num = $.trim($('input[name="phone"]').val());

            if(num == ""){
                popStatus(2, '请输入手机号', 1,'', true);
                return;
            }
            if(!(/^1[3|4|5|7|8]\d{9}$/.test(num))){
                popStatus(2, '手机号码格式错误', 1,'', true);
                return;
            }

            settime();
            //ajax获取短信验证码

//            $.post('{{ path('api_server_sendSms',{platform:'web'}) }}',{phone:num,type:1},function(data){
//                    console.log(data)
//                if (data.errorCode == 0) {
//                    settime();
//                    alert(data.data.salt);
//                } else {
//                    alert(data.message);
//                }
//            });
        });


        // 点击修改密码
        $('.auth-btn').on('click', function() {
            var phone = $.trim($('input[name="phone"]').val());
            var salt = $.trim($('input[name="salt"]').val());
            var new_password = $.trim($('input[name="new_password"]').val());
            var repeat_password = $.trim($('input[name="repeat_password"]').val());

            if (phone == '') {
                popStatus(2, '请输入手机号码', 1, '', true);
                return;
            }

            if(!(/^1[3|4|5|7|8]\d{9}$/.test(phone))) {
                popStatus(2, '手机号码格式错误', 1, '', true);
                return;
            }

            if (salt == '') {
                popStatus(2, '请输入短信验证码', 1, '', true);
                return;
            }

            if (new_password == '') {
                popStatus(2, '请输入新密码', 1, '', true);
                return;
            }

            if (repeat_password == '') {
                popStatus(2, '请输入确认密码', 1, '', true);
                return;
            }

            if (6 > new_password.length || new_password.length > 20) {
                popStatus(2, '新密码长度要在6~20位之间', 1,'', true);
                return;
            }

            if (6 > repeat_password.length || repeat_password.length > 20) {
                popStatus(2, '确认密码长度要在6~20位之间', 1,'', true);
                return;
            }

            if (new_password != repeat_password) {
                popStatus(2, '新密码和确认密码不一致', 1,'', true);
                return;
            }

        })
    })
</script>
</body>
</html>